<template>
  <div class="user_list-page flexC">
    <div class="pageHead" style="display: flex;justify-content: space-between">
      <p style="font-size: 17px">定时任务列表</p>
      <div>
        <Icon type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
        <i style="margin-right: 15px;">启用</i>
        <Icon type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
        <i style="margin-right: 15px;">停用</i>
        <Button type="primary" size="small" @click="crtimedtask=true">添加</Button>
<!--        创建-->
        <Modal
            width="650"
            v-model="crtimedtask"
            title="添加定时任务"
            :mask-closable="false"
        >
          <Form ref="crtimemodel" :model="crtimemodel" :rules="ruleValidate">
            <div>
              <FormItem label="名称" prop="name" style="margin-left: 51px;">
                <Input
                    type="text"
                    v-model="crtimemodel.name"
                    clearable
                    style="width: 500px"
                />
              </FormItem>
            </div>

            <div>
              <FormItem label="任务(已注册)" prop="task">
                <Select v-model="crtimemodel.task" style="width:500px" @on-change="radiovalue1(crtimemodel.task)">
                  <Option v-for="(value, key) in tasklist" :key="key" :value="value+':'+key">{{ value }}</Option>
                </Select>
              </FormItem>
            </div>

            <div>
              <FormItem label="Crontab日程" prop="crontab_id">
                <Select v-model="crtimemodel.crontab_id" style="width:500px">
                  <Option v-for="(item, index) in crontablist" :value="item.id" :key="index">{{ item.minute }}&nbsp;&nbsp;{{ item.hour }}&nbsp;&nbsp;{{ item.day_of_week }}&nbsp;&nbsp;{{ item.day_of_month }}&nbsp;&nbsp;{{ item.month_of_year }}&nbsp;&nbsp;&nbsp;{{ '(m/h/d/dM/MY)' }}</Option>
                </Select>
              </FormItem>
            </div>

            <div>
              <FormItem label="一次性任务" prop="one_off" style="margin-left: 19px;">
                <RadioGroup v-model="crtimemodel.one_off" button-style="default" size="small">
                    <Radio :label=1 type="true">是</Radio>
                    <Radio :label=0 type="false" >否</Radio>
                </RadioGroup>
              </FormItem>
            </div>

            <div style="display: flex;margin-left: 21px;">
              <FormItem label="开始时间" prop="start_time" style="width: 270px;">

                <DatePicker type="datetime" style="width: 191px;" v-model="crtimemodel.start_time" @on-change="radiovalue1(crtimemodel.start_time)"></DatePicker>
              </FormItem>
              <FormItem label="结束时间" prop="expires" style="width: 270px;margin-left: 36px;">
                <DatePicker type="datetime" style="width: 191px;" v-model="crtimemodel.expires"></DatePicker>
              </FormItem>
            </div>


            <div>
              <FormItem label="启用/停用" prop="enabled" style="margin-left: 25px;">
                <RadioGroup v-model="crtimemodel.enabled" button-style="default" size="small">
                    <Radio :label=1 type="true">启用</Radio>
                    <Radio :label=0 type="false" >停用</Radio>
                </RadioGroup>
              </FormItem>
            </div>

            <div>
              <FormItem label="位置参数" prop="args" style="margin-left: 30px;">
                <Input v-model="crtimemodel.args" type="textarea" :rows="4" style="width: 500px"/>
              </FormItem>
            </div>

            <div>
              <FormItem label="关键字参数" prop="kwargs" style="margin-left: 15px;">
                <Input v-model="crtimemodel.kwargs" type="textarea" :rows="4" style="width: 500px" />
              </FormItem>
            </div>

            <div>
              <FormItem label="描述" prop="desc" style="margin-left: 56px;">
                <Input v-model="crtimemodel.desc" type="textarea" :rows="4" style="width: 500px" />
              </FormItem>
            </div>
          </Form>


          <div slot="footer">
            <Button @click="crtimedtask=false">取消</Button>
            <Button @click="sure" type="primary">确定</Button>
          </div>
        </Modal>



<!--        编辑-->
        <Modal
            width="650"
            v-model="updatatask"
            title="编辑定时任务"
            :mask-closable="false"
        >
          <Form ref="updatamodel" :model="updatamodel" :rules="ruleValidate">
            <div>
              <FormItem label="名称" prop="name" style="margin-left: 51px;">
                <Input
                    type="text"
                    v-model="updatamodel.name"
                    clearable
                    style="width: 500px"
                />
              </FormItem>
            </div>

            <div>
              <FormItem label="任务(已注册)" prop="task">
                <Select v-model="updatamodel.task" style="width:500px">
                  <Option v-for="(value, key) in tasklist" :key="key" :value="value+':'+key">{{ value }}</Option>
                </Select>
              </FormItem>
            </div>

            <div>
              <FormItem label="Crontab日程" prop="crontab_id">
                <Select v-model="updatamodel.crontab_id" style="width:500px">
                  <Option v-for="(item, index) in crontablist" :value="item.id" :key="index">{{ item.minute }}&nbsp;&nbsp;{{ item.hour }}&nbsp;&nbsp;{{ item.day_of_week }}&nbsp;&nbsp;{{ item.day_of_month }}&nbsp;&nbsp;{{ item.month_of_year }}&nbsp;&nbsp;&nbsp;{{ '(m/h/d/dM/MY)' }}</Option>
                </Select>
              </FormItem>
            </div>

            <div>
              <FormItem label="一次性任务" prop="one_off" style="margin-left: 19px;">
                <RadioGroup v-model="updatamodel.one_off" button-style="default" size="small">
                    <Radio :label=1 type="true">是</Radio>
                    <Radio :label=0 type="false" >否</Radio>
                </RadioGroup>
              </FormItem>
            </div>

            <div style="display: flex;margin-left: 21px;">
              <FormItem label="开始时间" prop="start_time" style="width: 270px;">

                <DatePicker type="datetime" style="width: 191px;" v-model="updatamodel.start_time"></DatePicker>
              </FormItem>
              <FormItem label="结束时间" prop="expires" style="width: 270px;margin-left: 36px;">
                <DatePicker type="datetime" style="width: 191px;" v-model="updatamodel.expires"></DatePicker>
              </FormItem>
            </div>


            <div>
              <FormItem label="启用/停用" prop="enabled" style="margin-left: 25px;">
                <RadioGroup v-model="updatamodel.enabled" button-style="default" size="small">
                    <Radio :label=1 type="true">启用</Radio>
                    <Radio :label=0 type="false" >停用</Radio>
                </RadioGroup>
              </FormItem>
            </div>

            <div>
              <FormItem label="位置参数" prop="args" style="margin-left: 30px;">
                <Input v-model="updatamodel.args" type="textarea" :rows="4" style="width: 500px"/>
              </FormItem>
            </div>

            <div>
              <FormItem label="关键字参数" prop="kwargs" style="margin-left: 15px;">
                <Input v-model="updatamodel.kwargs" type="textarea" :rows="4" style="width: 500px" />
              </FormItem>
            </div>

            <div>
              <FormItem label="描述" prop="desc" style="margin-left: 56px;">
                <Input v-model="updatamodel.desc" type="textarea" :rows="4" style="width: 500px" />
              </FormItem>
            </div>
          </Form>


          <div slot="footer">
            <Button @click="updatatask=false">取消</Button>
            <Button @click="updatetask" type="primary">确定</Button>
          </div>
        </Modal>
      </div>
    </div>

    <div class="pageHead">
      <Table
          border
          :columns="columns1"
          :data="taskdata"
          sortable="custom"
          ref="table"
          size="small"
      >
        <template slot-scope="{ row }" slot="crontab">
          <strong>{{ row.crontab.minute }}&nbsp;&nbsp;&nbsp;{{ row.crontab.hour }}&nbsp;&nbsp;&nbsp;{{ row.crontab.day_of_week }}&nbsp;&nbsp;&nbsp;{{ row.crontab.day_of_month }}&nbsp;&nbsp;&nbsp;{{ row.crontab.month_of_year }}</strong>
        </template>

        <template slot-scope="{ row }" slot="one_off">
          <span v-if="row.one_off===false">{{ 'N' }}</span>
          <span v-if="row.one_off===true">{{ 'Y' }}</span>
        </template>

        <template slot-scope="{ row }" slot="enabled">
          <Icon v-if="row.enabled === true" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
          <Icon v-else-if="row.enabled === false" type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
        </template>


        <template slot-scope="{ row }" slot="action">
          <Button type="text" size="small" v-if="row.enabled===true" style="color: rgb(25, 190, 107);" @click="taskpatch(row.id,false)">禁用</Button>
          <Button type="text" size="small" v-if="row.enabled===false" style="color: rgb(25, 190, 107);" @click="taskpatch(row.id,true)">启用</Button>

          <Button type="text" size="small" style="color: rgb(45, 140, 240);" @click="taskupdate(row)">编辑</Button>
          <Poptip
            confirm
            transfer
            title="是否确定删除该定时任务?"
            @on-ok="deletetask(row.id)"
            >
            <Button type="text" size="small" style="color: rgb(237, 64, 20);">删除</Button>
          </Poptip>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs"
import { Registeredtaskslist,crontabList,taskslist,createtasks,taskspatch,tasksupdate,tasksdelete } from '../../api/api'

export default {
  name: "timedtask",
  data() {
    return {
      update_id:'',
      // update_crontab:'',
      tasklist: [],
      taskdata:[],
      crontablist: [],
      crtimemodel: {
        name: '',
        task: '',
        crontab_id: '',
        one_off: 0,
        start_time: '',
        expires: '',
        enabled: 1,
        args: '[]',
        kwargs: '{}',
        desc: ''
      },
      updatamodel: {
        name: '',
        task: '',
        crontab_id: '',
        one_off: 0,
        start_time: '',
        expires: '',
        enabled: 1,
        args: '[]',
        kwargs: '{}',
        desc: ''
      },
      crtimedtask: false,
      updatatask:false,
      columns1: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '名称',
          key: 'name',
           align: 'center'
        },
        {
          title: '任务',
          key: 'task',
          align: 'center',
          render: (h,params) => {
            let text = params.row.task.split(':')

            return h('span',text[0])
          }
        },
        {
          title: 'Crontab日程',
          slot: 'crontab',
           align: 'center'
        },
        {
          title: '开始时间',
          key: 'start_time',
           align: 'center'
        },
        {
          title: '过期时间',
          key: 'expires',
           align: 'center'
        },
        {
          title: '一次性任务',
          slot: 'one_off',
          align: 'center'
        },
        {
          title: '启用/停用',
          slot: 'enabled',
          align: 'center'
        },
        {
          title: "操作",
          slot: "action",
          width: 170,
          align: "center",
          fixed: "right",
        },
      ],
      ruleValidate: {
        name: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'}
        ],
        task: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change'},
        ],
        crontab_id: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change',type:'number'},
        ],
        start_time: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change',type:'date'},
        ],
        expires: [
          {required: true, message: '该字段是必填项', trigger: 'blur,change',type:'date'},
        ],
      },
    }
  },

  created() {
    this.gettasksList();
    this.getcrontabList();
    this.taskslist();
  },

  methods : {
    taskpatch(id,is_enable) {
      if (is_enable){
        let data = {
          'enabled':true
        }
        taskspatch(id,data).then(res =>{
          this.$Message.success('启用成功！')
          this.taskslist()
      })
        }else {
        let data = {
          'enabled':false
        }
        taskspatch(id,data).then(res =>{
          this.$Message.success('禁用成功！')
          this.taskslist()
      })
      }
    },

    taskslist() {
      taskslist().then(res => {
        let data = res.data.data
        this.taskdata = data
      })
    },

    gettasksList() {
      Registeredtaskslist().then(res => {
        let data = res.data.data
        this.tasklist = data
        // console.log(this.tasklist)
      })
    },

    getcrontabList() {
      crontabList().then(res => {
        let data = res.data.data
        this.crontablist = data
      })
    },

    radiovalue1(item) {
      console.log(item)
    },

    sure() {
      let data = {
        'name': this.crtimemodel.name,
        'task': this.crtimemodel.task,
        'crontab_id': this.crtimemodel.crontab_id,
        'one_off': this.crtimemodel.one_off,
        'start_time': this.crtimemodel.start_time,
        'expires': this.crtimemodel.expires,
        'enabled': this.crtimemodel.enabled,
        'args': this.crtimemodel.args,
        'kwargs': this.crtimemodel.kwargs,
        'desc': this.crtimemodel.desc
      }

      createtasks(data).then(res => {
        this.crtimedtask = false
        this.$Message.success('创建定时任务成功！')
        this.taskslist()
      })
    },

    taskupdate(row){
      this.updatatask = true
      this.update_id = row.id
      this.updatamodel.name = row.name
      this.updatamodel.task= row.task
      this.updatamodel.crontab_id= row.crontab.id
      this.updatamodel.one_off= row.one_off ===true? 1 : 0
      this.updatamodel.start_time= row.start_time
      this.updatamodel.expires= row.expires
      this.updatamodel.enabled= row.enabled ===true? 1 : 0
      this.updatamodel.args= row.args
      this.updatamodel.kwargs= row.kwargs
      this.updatamodel.desc= row.desc

      // this.update_crontab = row.crontab
    },

    updatetask() {
      let data ={
      'id': this.update_id,
      'name': this.updatamodel.name,
      'task': this.updatamodel.task,
      'crontab_id': this.updatamodel.crontab_id,
      'one_off': this.updatamodel.one_off,
      'start_time': this.updatamodel.start_time,
      'expires': this.updatamodel.expires,
      'enabled': this.updatamodel.enabled,
      'args': this.updatamodel.args,
      'kwargs': this.updatamodel.kwargs,
      'desc': this.updatamodel.desc,


      'clocked': null,
      'exchange': null,
      'expire_seconds': null,
      'interval': null,
      'last_run_at': null,
      'priority': null,
      'queue': null,
      'routing_key': null,
      'solar': null,
      }
      tasksupdate(this.update_id,data).then(res =>{
        this.taskslist()
        this.updatatask = false
        this.$Message.success('修改成功')
      })
    },

    deletetask(id) {
      tasksdelete(id).then(res =>{
        this.taskslist()
        this.$Message.success('删除成功！')
      })
    },
  },
}
</script>

<style scoped>

</style>